<script setup lang="ts">
import Model from '@/components/common/Model.vue'
import { ref, watch } from 'vue';
const model=ref(null),curr=ref<Sku>({}),number=ref(0)
interface Sku{
  _id?:string,
  [key:string]:any
}
interface Props{
  visible?:boolean,
  skus?:Array<any>
  modelValue?:Sku
}
const props=withDefaults(defineProps<Props>(),{
  visible:false,
  modelValue(){
    return {}
  },
  skus(){
    return []
  }
})
const emit=defineEmits<{
  (e: 'update:visible',val): void
  (e: 'update:modelValue',val): void
  (e: 'addCart'): void
  (e: 'purchase'): void
}>()
watch(() => props.visible,(_visible,__visible) =>{
  if(_visible==__visible) return
  if(_visible){
    model.value?.showModel()
  }else{
    model.value?.hideModel()
  }
})
watch(props,(_props) =>{
  if(_props.skus.length>0){
    curr.value=_props.skus[0]
  }
  if(_props.modelValue._id){
    curr.value=_props.modelValue
    number.value=_props.modelValue._number??1
  }
})
function chooseSku(item) {
  curr.value=item
}
function decreaseNumber() {
  if(number.value==1) return
  number.value--
  curr.value._number=number.value
}
function plusNumber() {
  if(number.value==curr.value.stock) return
  number.value++
  curr.value._number=number.value
}
function close() {
  emit('update:modelValue',curr.value)
  emit('update:visible',false)
}
</script>

<template>
  <Model mode="bottom" ref="model" @hide="close">
    <div
      w:h="250 max-screen"
      w:w="screen"
      w:bg="white"
      w:border="rounded-t-2xl"
      w:p="6"
      w:pos="relative"
    >
      <div
        w:flex="~ nowrap"
        w:align="items-end"
      >
        <img :src="curr.goods_thumb"
          w:w="50"
        />
        <div
          w:m="l-4"
        >
          <div
            w:text="red-600 3xl"
            w:font="bold"
            w:m="b-2"
          >{{curr.price}}</div>
          <div
            w:text="gray-400 xl"
          >{{curr.sku_name}}</div>
        </div>
      </div>
      <div
        w:font="bold"
        w:m="y-4"
        w:text="2xl"
      >颜色</div>
      <div v-for="(item,idx) in skus" :key="item._id" @click="chooseSku(item)" 
        :class="[curr._id==item._id?'text-red-500 border-1 border-solid border-red-500':'']"
        w:p="y-2 x-8"
        w:border="rounded-full"
        w:bg="gray-100"
        w:w="max"
        w:m="b-4"
        w:max-w="full"
        w:text="overflow-ellipsis space-nowrap"
        w:overflow="hidden"
      >{{item.sku_name}}</div>
      <div
        w:m="y-4"
        w:flex="~ nowrap"
        w:align="items-center"
        w:justify="between"
      >
        <div
          w:font="bold"
          w:text="2xl"
        >数量</div>
        <div
          w:flex="~ nowrap"
          w:align="items-center"
        >
          <div class="iconfont icon-decrease" @click="decreaseNumber"></div>
          <input type="number" max="30" min="0" :value="number" disabled
            w:outline="none"
            w:m="x-2"
            w:h="full"
            w:w="10"
            w:bg="gray-200"
            w:text="center"
          />
          <div class="iconfont icon-plus" @click="plusNumber"></div>
        </div>
      </div>
      <div
        w:flex="~ nowrap"
        w:justify="between"
        w:pos="absolute bottom-0 left-0"
        w:w="full"
        w:bg="white"
        w:p="y-4"
      >
        <div @click="$emit('addCart')"
          w:flex="~"
          w:align="items-center"
          w:justify="center"
          w:bg="red-600"
          w:text="white"
          w:border="rounded-full"
          w:w="1/2"
          w:m="x-4"
          w:p="y-5"
        >加入购物车</div>
        <div @click="$emit('purchase')"
          w:flex="~"
          w:align="items-center"
          w:justify="center"
          w:bg="yellow-600"
          w:text="white"
          w:border="rounded-full"
          w:w="1/2"
          w:m="x-4"
          w:p="y-5"
        >立即购买</div>
      </div>
      <div class="iconfont icon-close" @click="close"
        w:pos="absolute top-4 right-4"
      ></div>
    </div>
  </Model>
</template>

<style scoped lang="scss">

</style>